<template>
	<view>
		<view class="baby">
			<view class="header">
				<view class=" gui-bg-gray search-warp gui-border-box"><gui-search1 @inputting="inputting" @confirm="confirm" @clear="clear"></gui-search1></view>
				<view v-if="address" class="header-dingwei gui-flex gui-space-between">
					<view class="dingwei-left gui-flex gui-space-between">
						<view class="gui-grids-items"><text class="gui-grids-icon gui-icons">&#xe61c;</text></view>
						<view class="dingwei-text">{{ address }}</view>
					</view>
					<view @tap="diwei()" class="dingwei-right gui-flex gui-space-between">
						<view class="gui-grids-items"><text class="gui-grids-icon gui-icons ion ">&#xe63f;</text></view>
						<view class="dingwei-text1">重新定位</view>
					</view>
				</view>
			</view>
			<view class="mian">
				<gui-empty v-if="list.length<=0">
					<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="gui-empty-img" 
						src="https://upload-images.jianshu.io/upload_images/15372054-1f849183cebb80b1.png?imageMogr2/auto-orient/strip|imageView2/2/w/388/format/webp"></image>
					</view>
					<text slot="text" 
					class="gui-text-small gui-block-text gui-text-center gui-margin-top" style="color:#9DABFF;">暂无数据 ......</text>
				</gui-empty>
				<radio-group @change="radioChange">
					<label v-for="(item, index) in list" :key="item.id" class="gui-check-item gui-check-item-y  ">
						<view class="main-box gui-flex gui-space-between">
							<view class="main-img"><image :src="imgServer + item.img" mode="aspectFill"></image></view>
							<view class="main-right">
								<view class="main-right-top">{{ item.juli }}km</view>
								<view class="main-right-dain">{{ item.title }}
									<text style="color: #969696;font-weight: normal">| {{ item.address }}</text>
								</view>
								<view v-if="item.is_dong" class="dain-text">支持冷冻/冷藏</view>
								<view v-else class="dain-text" style="color: red;">不支持冷冻/冷藏</view>
							</view>
							<view class="xuan gui-flex gui-align-items-center" style="padding-left: 15rpx;">
								<radio v-if='user.tuan_address==item.id' checked color="#e15324" :value="item.id"></radio>
								<radio v-else color="#e15324" :value="item.id"></radio>
							</view>
						</view>
					</label>
				</radio-group>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			address: '',
			lat: '',
			lon: '',
			key: '',
			list: [],
			imgServer: '',
			user:{}
		};
	},
	onLoad() {
		this.imgServer = uni.common.imgServer;
	},
	onShow() {
		uni.common.post(
			uni.common.apiServer + 'my',
			{
				type: 'get_my_info'
			},
			false,
			res => {
				if (res.code == 1) {
					this.user = res.data
				} else {
					uni.showToast({
						icon: 'none',
						title: '尚未登陆，请登陆后购买'
					});
				}
			},
			e => {
				console.log(e);
			}
		);
		this.diwei();
	},
	methods: {
		radioChange: function(evt) {
			let id=evt.detail.value
			uni.common.post(
				uni.common.apiServer + 'my',
				{
					type: 'update_tuangou_one',
					id:id
				},
				false,
				res => {
					if (res.code == 1) {
						uni.common.back('设置成功')
					}else{
						uni.common.msg('设置错误')
					}
				},
				e => {
					console.log(e);
				}
			);
		},
		diwei() {
			let that = this;
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					that.lat = res.latitude;
					that.lon = res.longitude;
					that.getdata();
				},
				fail(e) {
					console.log(e);
					uni.common.msg('定位失败');
					that.getdata();
				}
			});
		},
		inputting: function(e) {
			this.key = e;
		},
		clear(){
			this.key = '';
			this.getdata()
		},
		confirm: function(e) {
			this.getdata();
		},
		getdata() {
			uni.common.post(
				uni.common.apiServer + 'my',
				{
					type: 'get_tuangou_list',
					lat: this.lat,
					lon: this.lon,
					key: this.key
				},
				false,
				res => {
					if (res.code == 1) {
						this.address = res.address;
						this.list = res.data;
					}
				},
				e => {
					console.log(e);
				}
			);
		}
	}
};
</script>
<style lang="scss">
.dain-text {
	color: #616161;
	font-size: 30rpx;
}
.dain-ding {
	font-weight: normal;
	color: #9a9a9a;
	margin-left: 10rpx;
}
.main-right-dain {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
	-webkit-line-break: auto;
	-webkit-box-orient: vertical;
	line-height: 45rpx;
	font-size: 32rpx;
	font-weight: bold;
}
.main-right-top {
	margin-bottom: 15rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	width: 150rpx;
	border: 1rpx solid #ca383b;
	font-size: 26rpx;
	color: #ca383b;
}
.main-right {
	margin-left: 20rpx;
	flex: 1;
}
.main-box {
	padding: 15rpx;
}
.main-img image {
	width: 100%;
	height: 100%;
}
.main-img {
	width: 180rpx;
	height: 180rpx;
	flex-shrink: 0;
}
.dingwei-text {
	color: #141414;
	font-size: 28rpx;
}
.dingwei-text1 {
	margin-right: 15rpx;
	color: #4f4f4f;
	font-size: 28rpx;
}
.ion {
	color: #cecece;
	font-size: 30rpx !important;
}
.gui-grids-items {
	width: 60rpx !important;
}
.header-dingwei {
	border-bottom: 1rpx solid #e3e3e3;
	padding: 10rpx;
	height: 80rpx;
	line-height: 80rpx;
}
.gui-icons {
	color: #cecece;
	font-size: 40rpx;
}
.search-warp {
	width: 750rpx;
	padding: 22rpx 50rpx;
}
</style>
